<!--CSS-->
<link rel="stylesheet" type="text/css" href="../css/icecss.css" />
<link rel="stylesheet" href="custom.css">
<!--/CSS-->

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>ICECSS</title>

</head>

<body>
    <div class="ding sll"><a href="#rhsy">顶</a>
    </div>

        <!--抽屉式导航-->
        <nav class="ice-menu-sp ice-menu-sp-right">
            <ul>
                <li>test1</li>
                <li>test2</li>
                <li>test3</li>
                <li>test4</li>
                <li>test5</li>
            </ul>
        </nav>


    <!--导航栏-->
    <header class="ice-menu  ice-menu-hover">
        <div class="ice-menu-logo">ICECSS</div>
        <nav class="ice-main-nav">
            <ul>
                <li><a href="#0">Docs</a>
                </li>
                <li><a href="https://github.com/T-baby/ICECSS/">GitHub</a>
                </li>
                <li><a href="https://github.com/T-baby/ICECSS/archive/master.zip">Download</a>
                </li>
                <li><a href="http://besdlab.cn">Contact</a>
                </li>
                <li><a href="http://besdlab.cn/cdn">CDN</a>
                </li>
            </ul>
        </nav>
    </header>
    <!--/导航栏-->
    <!--宽度限制-->
    <div class="ice-widescreen">

        <!--导航菜单-->

        <div class="ice-div ice-div-2-10" >
            <ul class="ice-nav ice-nav-accordion ice-text-left sll">
                <a href="#rhsy">
                    <li>如何使用</li>
                </a>
                <a href="#jcys">
                    <li>基础元素</li>
                </a>
                <a href="#yzys">
                    <li>预置颜色</li>
                </a>
                <a href="#bj">
                    <li>布局</li>
                </a>
                </a>
                <li>组件</li>
                <li>
                    <ul>
                        <a href="#wz">
                            <li>文字</li>
                        </a>
                        <a href="#an">
                            <li>按钮</li>
                        </a>
                        <a href="#kg">
                            <li>开关</li>
                        </a>
                        <a href="#jdt">
                            <li>进度条</li>
                        </a>
                        <a href="#fy">
                            <li>分页</li>
                        </a>
                    </ul>
                </li>
                <li>导航</li>
                <li>
                    <ul>
                        <a href="#dhl">
                            <li>导航栏</li>
                        </a>
                        <a href="#dhcd">
                            <li>导航菜单</li>
                        </a>
                        <a href="#ejdh">
                            <li>二级导航</li>
                        </a>
                    </ul>
                </li>
                <a href="#bg">
                    <li>表格</li>
                </a>
                <a href="#bd">
                    <li>表单</li>
                </a>
                <li>功能</li>
                <li>
                    <ul>
                        <a href="#cdn">
                            <li>CDN服务</li>
                        </a>
                        <a href="#yfw">
                            <li>云服务</li>
                        </a>
                         <a href="#mbyq">
                            <li>模板引擎</li>
                        </a>
                        <a href="#phyd">
                            <li>平滑移动</li>
                        </a>
                        <a href="#gdjk">
                            <li>滚动监控</li>
                        </a>
                        <a href="#tcshb">
                            <li>弹出式画布</li>
                        </a>
                        <a href="#ctsdh">
                            <li>抽屉式导航</li>
                        </a>
                        <a href="#tpycjz">
                            <li>图片延迟加载</li>
                        </a>
                        <a href="#cljyz">
                            <li>超链接预载</li>
                        </a>
                        <a href="#qpgd">
                            <li>全屏滚动</li>
                        </a>
                        <a href="#scxg">
                            <li>视差效果</li>
                        </a>

                    </ul>
                </li>
                <a href="#tb">
                    <li>图标</li>
                </a>
            </ul>
        </div>
        <!--/导航菜单-->
        <!--主体-->
        <div class="ice-div ice-div-8-10 ice-div-last" id="rhsy">
            <!--如何使用-->
            <div class="ice-panel-original">
                <p class="ice-title">如何使用</p>
                <p> ICECSS是由BESD设计实验室基于Less和Jquery开发的一个轻量级的CSS框架。 所以ICECSS支持通过Less引用也支持普通方式
                </p>
                <p>--普通方式调用--</p>
                <p>在html文件头部引用ICECSS的CSS</p>
                <pre> <code>&lt;link rel="stylesheet" href="css/icecss.css&gt;</code></pre>
                <p>在html文件尾部引用ICECSS的JS（注意，ICECSS是基于Jquery的，所以在引用ICECSS的JS文件前请先导入Jquery）</p>
                <pre> <code>&lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
 &lt;script src="js/icecss.js"&gt;&lt;/script&gt;</code></pre>
                <p>--Less调用--</p>
                <pre> <code>&lt;link rel="stylesheet/less" href="css/icecss.less&gt;</code></pre>
                <p>在html文件尾部多引用一个less.min.js即可。<a href="http://less.bootcss.com/">更多有关Less用法</a>
                </p>
                <p>你也可以加入我们的交流群：320283384</p>
            </div>
            <!--/如何使用-->
            <!--基础元素-->
            <div class="ice-panel-original" id="jcys">
                <p class="ice-title">基础元素</p>
                <p>所有的基础元素如h1等，我们要求必须在ice-div下才会生效。</p>
                <p>同理，ice-div下基础元素都不需要额外的增加class。</p>
                <p>如：</p>
                <pre><code>&lt;div class="ice-div"&gt;&lt;h1&gt;TEST&lt;/h1&gt;&lt;/div&gt;</code></pre>
                <p>基础元素包含：</p>
                <ul>
                    <li>h1</li>
                    <li>h2</li>
                    <li>h3</li>
                    <li>h4</li>
                    <li>h5</li>
                    <li>h6</li>
                    <li>p</li>
                    <li>ul</li>
                    <li>li</li>
                    <li>ol</li>
                    <li>dl</li>
                    <li>dt</li>
                    <li>dd</li>
                    <li>a</li>
                    <li>blockquote</li>
                    <li>hr（分割线）</li>
                    <li>pre</li>
                    <li>code</li>
                </ul>
                <p>如果你需要有引用标题的效果，可以这么做：</p>
                <pre><code>&lt;p class="ice-title"&gttest&lt;/p&gt</code></pre>
                <p>面板：</p>
                <p>您可以使用ice-panel这个class来建立一个面板，这个是默认的样式，是灰框白底。 </p>
                <p>不需要任何边框和背景的话，可以使用ice-panel-original这个class。</p>
                <p> ICECSS专门为您提供了用于提示的ice-panel-point面板。 还提供了用于关闭父元素的ice-close，您可以将这个用于关闭提示面板。</p>
                <pre><code>&ltdiv class="ice-panel"&gt这是一个面板&lt/div&gt

&ltdiv class="ice-panel ice-color-blue-2"&gt&ltp&gt测试&lt/p&gt&lt/div&gt

&ltdiv class="ice-panel-point ice-color-green-2"&gt

&ltdiv class="ice-close"&gt&lt/div&gt

&ltp&gt这是一个可关闭的提示面板&lt/p&gt

&lt/div&gt</code></pre>
            </div>
            <!--/基础元素-->

            <!--预置颜色-->
            <div class="ice-panel-original" id="yzys">
                <p class="ice-title">预置颜色</p>
                <p>我们在ICECSS的Less中预置了一些颜色。</p>
                <pre><code> @color-common: #297fb8;
 @color-white: #FFFFFF;
 @color-blue-1: #3598DC;
 @color-blue-2: #2A80B9;
 @color-green-1: #1bbc9d;
 @color-green-2: #16A086;
 @color-green-3: #2FCC71;
 @color-green-4: #27AE61;
 @color-yellow-1: #F1C40F;
 @color-yellow-2: #F49C14;
 @color-orange-1: #E77E23;
 @color-orange-2: #D55401;
 @color-red-1: #E84C3D;
 @color-red-2: #C1392B;
 @color-purple-1: #9C59B8;
 @color-purple-2: #8F44AD;</code></pre>
                <p>而主体颜色都是通过引用@color-common这个变量的，如果需要改变主题颜色可以直接将颜色代码替换到变量后面。</p>
                <p>如我要替换成黄色：@color-common: #F1C40F;</p>
            </div>
            <!--/预置颜色-->
            <!--布局-->
            <div class="ice-panel-original" id="bj">
                <p class="ice-title">布局</p>
                <p>ICECSS的布局会自动适应屏幕。<b>但是请不要把导航栏放在ICECSS的布局中</b>，因为ICECSS的导航栏有自己独有的自适应能力。</p>
                <p>我们为您提供了三种宽度限制：ice-common、ice-widescreen、ice-full 。分别宽度限制是1020px、1220px和100%。 当然您也可以不增加宽度限制，直接使用ice-div。</p>
                <p>ICECSS的DIV组件提供如下几种class，第一个数字为分子，第二个数字为分母。每排可以容纳100%。</p>
                <ul>
                    <li>ice-div-1-1</li>
                    <li>ice-div-1-2</li>
                    <li>ice-div-1-3</li>
                    <li>ice-div-1-4</li>
                    <li>ice-div-1-6</li>
                    <li>ice-div-4-10、ice-div-6-10</li>
                    <li>ice-div-7-10、ice-div-3-10</li>
                    <li>ice-div-2-10、ice-div-8-10</li>
                    <li>ice-div-9-10、ice-div-1-10</li>
                </ul>
                <p>你需要在每个class前加入ice-div才能使用，如 :</p>
                <pre><code>&ltdiv class="ice-div ice-div-1-1"&gt&lt/div&gt</code></pre>
                <p>并且你需要在每行的最后面的div那里加入ice-div-last，来换行。如:</p>
                <pre><code>&ltdiv class="ice-div ice-div-1-1 ice-div-last"&gt&lt/div&gt</code></pre>
                <p>在ice-div下图片也是会自动适应的，不需要增加额外的class。</p>
                <p>水平居中请使用.ice-center-plane；绝对居中的话在父元素使用 .ice-center，子元素使用.ice-center-abs 。</p>

            </div>
            <!--/布局-->

            <!--文字-->
            <div class="ice-panel-original" id="wz">
                <p class="ice-title">文字</p>
                <p><b>（1）水平对齐</b>
                </p>

                <p>文本的水平对齐样式有（使子元素对齐）</p>

                <p>ice-text-left 左对齐</p>

                <p>ice-text-right 右对齐</p>

                <p>ice-text-center 水平居中对齐</p>

                <p><b>（2）垂直对齐</b>
                </p>

                <p>文本的垂直对齐样式有（使子元素对齐）</p>

                <p>ice-text-top 垂直顶部对齐</p>

                <p>ice-text-middle 垂直居中对齐</p>

                <p>ice-text-bottom 垂直底部对齐</p>

                <p><b>（3）换行控制</b>
                </p>

                <p>ice-text-break 强制换行</p>

                <p>ice-text-truncate 隐藏超出的文字</p>

                <p>ice-text-nowrap 让文字随意超出，不做限制</p>

            </div>
            <!--/文字-->

            <!--按钮-->
            <div class="ice-panel-original" id="an">
                <p class="ice-title">按钮</p>
                <p>在0.7版后，只要是在ice-div下的button标签和type="button"的标签都会自动加上样式。</p>
                <p>不用额外的增加标签</p>
                <button>我是一个可爱的按钮</button>
                <p>如果要变大，可以增加ice-button-big。变小可以增加ice-button-mini</p>
                <p>幽灵按钮则是增加ice-button-ghost</p>
                <button class="ice-button-big">大按钮</button>
                <button>普通按钮</button>
                <button class="ice-button-mini">小按钮</button>
                <br />
                <button class="ice-button-big ice-button-ghost">大按钮</button>
                <button class="ice-button-ghost">普通按钮</button>
                <button class="ice-button-mini ice-button-ghost">小按钮</button>

            </div>
            <!--/按钮-->

            <!--开关-->
            <div class="ice-panel-original" id="kg">
                <p class="ice-title">开关</p>
                <div class="ice-switch">

                    <input type="checkbox" class="ice-switch-checkbox" id="switch" checked>

                    <label class="ice-switch-label " for="switch">

                        <div class="ice-switch-inner">

                            <div class="ice-switch-active"></div>

                            <div class="ice-switch-inactive"></div>

                        </div>

                        <div class="ice-switch-bottom"></div>

                    </label>

                </div>
                <br />
                <pre><code>&ltdiv class="ice-switch"&gt

&ltinput type="checkbox"  class="ice-switch-checkbox" id="switch" checked&gt

&ltlabel class="ice-switch-label " for="switch"&gt

&ltdiv class="ice-switch-inner"&gt

&ltdiv class="ice-switch-active"&gt&lt/div&gt

&ltdiv class="ice-switch-inactive"&gt&lt/div&gt

&lt/div&gt

&ltdiv class="ice-switch-bottom"&gt&lt/div&gt

&lt/label&gt

&lt/div&gt</code></pre>


            </div>
            <!--/开关-->

            <!--进度条-->
            <div class="ice-panel-original" id="jdt">
                <p class="ice-title">进度条</p>
                <p>您可以通过修改ice-bar下的div的宽度来达到进度的效果。</p>
                <div class="ice-bar">
                    <div style="width:80%"></div>
                </div>
                <br/>
                <pre><code>&ltdiv class="ice-bar"&gt

&ltdiv style="width:80%"&gt&lt/div&gt

&lt/div&gt</code></pre>

            </div>
            <!--/进度条-->
            <!--分页-->
            <div class="ice-panel-original" id="fy">
                <p class="ice-title">分页</p>

                <ul class="ice-page">

                    <li>1</li>

                    <li class="active">2</li>

                    <li>3</li>

                    <li class="disabled">4</li>

                </ul>

                <pre><code>&ltul class="ice-page"&gt

    &ltli&gt1&lt/li&gt

    &ltli class="active"&gt2&lt/li&gt

    &ltli&gt3&lt/li&gt

    &ltli class="disabled"&gt4&lt/li&gt

&lt/ul&gt</code></pre>

            </div>
            <!--/分页-->

            <!--导航栏-->
            <div class="ice-panel-original" id="dhl">
                <p class="ice-title">导航栏</p>
                <p>（1）菜单简介 </p>
                <p>在ICECSS中，导航栏是Menu组件。可以自适应屏幕。我们建议在header标签中放置Menu组件，建议不要放在ICECSS的布局组件中。</p>
                <p>（2）基本菜单 例子：</p>
                <pre><code>  &ltheader class="ice-menu"&gt
&ltnav class="ice-main-nav"&gt
&ltul&gt
&ltli&gt&lta href="#0"&gtHome&lt/a&gt
&lt/li&gt
&ltli&gt&lta href="#0"&gtHome&lt/a&gt
&lt/li&gt
&lt/ul&gt
&lt/nav&gt
&lt/header&gt </code></pre>
                <p>（3）在导航栏左侧增加LOGO：</p>
                <pre><code>&ltdiv class="ice-menu-logo"&gtLOGO名字&lt/div&gt</code></pre>
                <p>把代码增加到header下面的第一行。 使导航栏固定： 在ice-menu后面追加 ice-fixed</p>
                <pre><code>&ltheader class="ice-menu ice-fixed"&gt</code></pre>
                <p>3.使导航栏透明，去掉背景色： 在ice-menu后追加ice-menu-lucency</p>
                <pre><code> &ltheader class="ice-menu ice-fixed ice-menu-lucency"&gt</code></pre>
                <p>4.使导航栏在鼠标悬浮时有效果： 追加ice-menu-hover</p>
                <pre><code>&ltheader class="ice-menu ice-fixed ice-menu-lucency ice-menu-hover"&gt</code></pre>
                <p>（4）全屏大图 我们在菜单组件中额外的增加了一个全屏大图用的组件ice-intro-big，可以搭配其它组件一起使用。 </p>
                <p>提示：为了达到最好的效果，不建议放在ICECSS布局系统的宽度限制下。 使用例子：</p>
                <pre><code>&ltdiv class="ice-div ice-intro-big ice-center" style="background-image:url('img/bg.jpg')"&gt
&ltdiv class="ice-center-abs"&gt
&lth1 style="color:#fff"&gtICECSS is a good css.&lt/h1&gt
&ltbutton class="ice-button-big"&gtMore&lt/button&gt
&lt/div&gt &lt/div&gt</code></pre>
            </div>
            <!--/导航栏-->
            <!--导航菜单-->
            <div class="ice-panel-original" id="dhcd">
                <p class="ice-title">导航菜单</p>
                <pre><code> &ltul class="ice-nav"&gt
&ltli class="active"&gt这是个被按下的&lt/li&gt
&ltli&gt
&ltul&gt
&ltli&gt这是个二级菜单项&lt/li&gt
&ltli&gt这是个二级菜单项&lt/li&gt
&lt/ul&gt
&lt/li&gt
&ltli&gt这是个一级菜单项&lt/li&gt
&ltli&gt这是个一级菜单项&lt/li&gt
&lt/ul&gt</code></pre>

                <p>您也可以通过增加iice-nav-accordion使导航菜单具有手风琴的功能。</p>

            </div>
            <!--/导航菜单-->

            <!--二级导航-->
            <div class="ice-panel-original" id="ejdh">
                <p class="ice-title">二级导航</p>
                <ul class="ice-subnav">

                    <li class="active"><a>hello</a>
                    </li>

                    <li>world</li>

                </ul>
                <pre><code>&ltul class="ice-subnav"&gt        &lt!--你也可以通过追加ice-subnav-line来增加分割线--&gt

&ltli class="active"&gt&lta&gthello&lt/a&gt&lt/li&gt 

&ltli&gtworld&lt/li&gt

&lt/ul&gt</code></pre>


            </div>
            <!--/二级导航-->

            <!--表格-->
            <div class="ice-panel-original" id="bg">
                <p class="ice-title">表格</p>

                <p>在table标签中增加ice-table这个class即可。</p>
                <p>你可以在ice-table下使用</p>
                <p>来充当二级标题或注释什么的。</p>
                <pre><code>&lttable class="ice-table"&gt&ltcaption&gt二级标题&lt/caption&gt&lt/table&gt</code></pre>
                <p>可以通过添加ice-table-striped来达到斑马纹效果。</p>
                <pre><code>&lttable class="ice-table ice-table-striped"&gt&lt/table&gt</code></pre>
                <p>在没有使用ice-table-striped的情况下，可以增加ice-table-hover使表单在鼠标悬浮时有效果。</p>
                <pre><code>&lttable class="ice-table ice-table-striped"&gt&lt/table&gt</code></pre>
                <table class="ice-table ice-table-striped">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>Email</th>
                            <th>订阅时间</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <td>小计</td>
                            <td></td>
                            <td>6人</td>
                            <td> </td>

                        </tr>
                    </tfoot>
                    <tbody>
                        <tr>
                            <td>小明</td>
                            <td>qqq@qq.com</td>
                            <td>2014年12月01日</td>
                            <td><i class="ice-icon-pencil"></i>
                            </td>
                        </tr>
                        <tr>
                            <td>小红</td>
                            <td>ssss@163.com</td>
                            <td>2014年12月01日</td>
                            <td><i class="ice-icon-pencil"></i>
                            </td>
                        </tr>
                        <tr>
                            <td>小明</td>
                            <td>qqq@qq.com</td>
                            <td>2014年12月01日</td>
                            <td><i class="ice-icon-pencil"></i>
                            </td>
                        </tr>
                        <tr>
                            <td>小红</td>
                            <td>ssss@163.com</td>
                            <td>2014年12月01日</td>
                            <td><i class="ice-icon-pencil"></i>
                            </td>
                        </tr>
                        <tr>
                            <td>小明</td>
                            <td>qqq@qq.com</td>
                            <td>2014年12月01日</td>
                            <td><i class="ice-icon-pencil"></i>
                            </td>
                        </tr>
                        <tr>
                            <td>小红</td>
                            <td>ssss@163.com</td>
                            <td>2014年12月01日</td>
                            <td><i class="ice-icon-pencil"></i>
                            </td>
                        </tr>

                    </tbody>
                </table>

            </div>
            <!--/表格-->


            <!--表单-->
            <div class="ice-panel-original" id="bd">
                <p class="ice-title">表单</p>

                <p>（1）基本表单</p>
                <p>在form标签中增加ice-form类即可。</p>
                <pre><code>&ltform class="ice-form"&gt</code></pre>
                <p>（2）强制换行</p>
                <p>可以使用</p>
                <pre><code>&ltdiv class="ice-onerow"&gt&ltdiv&gt</code></pre>
                <p>来包裹内容。</p>
                <p>（3）表单标签</p>
                <p>可以在表单元素的前面增加一个ice-form-label。</p>
                <pre><code>&ltlabel class="ice-form-label"&gttest&lt/label&gt
&ltinput type="text"&gt</code></pre>
                <p>（4）增加图标</p>
                <pre><code>&ltdiv class="ice-form-icon"&gt   &lt!--这个是必须的--&gt
&lti class="ice-icon-pencil"&gt&lt/i&gt &lt!--这里可以换成其它图标--&gt
&ltinput type="text"&gt
&lt/div&gt</code></pre>
                <div class="ice-panel-original">
                    <form class="ice-form">
                        <div class="ice-onerow">
                            <label class="ice-form-label">Username</label>
                            <input type="text">
                        </div>
                        <div class="ice-onerow">
                            <label class="ice-form-label">Password</label>
                            <input type="text">
                        </div>
                        <br>


                        <div class="ice-form-icon">
                            <label class="ice-form-label">Card</label>
                            <i class="ice-icon-pencil"></i>
                            <input type="text">
                        </div>






                        <div class="ice-onerow">
                            <input type="radio" name="sex"> man
                            <input type="radio" name="sex"> woman
                        </div>
                        <div class="ice-onerow">
                            <input type="checkbox"> Remeber Me
                        </div>
                        <div class="ice-onerow">
                            <button>Login</button>
                        </div>


                    </form>
                </div>
                <!--/表单-->

                <!--CDN服务-->
                <div class="ice-panel-original" id="cdn">
                    <p class="ice-title">CDN服务</p>
                    <p>BESD本身有提供CDN服务：</p>
                    <p>http://cdn.besdlab.cn/jquery/2.1.1/jquery.2.1.1.min.js</p>
                    <p>http://cdn.besdlab.cn/icecss/icecss.css</p>
                    <p>http://cdn.besdlab.cn/icecss/icecss.min.css</p>
                    <p>http://cdn.besdlab.cn/icecss/icecss.less</p>
                    <p>http://cdn.besdlab.cn/icecss/icecss.js</p>
                    <p>http://cdn.besdlab.cn/icecss/less.min.js</p>
                    <p>http://cdn.besdlab.cn/icecss/plugin/插件文件名</p>
                </div>
                <!--/CDN服务-->


                <!--云服务-->
                <div class="ice-panel-original" id="yfw">
                    <p class="ice-title">云服务</p>
                    <p>BESD云服务是用于帮助快速开发DEMO和测试用的云服务平台，ICECSS0.8版本后已经附带了JS版的SDK。通过BESD云服务可以在不写后端代码的情况下快速完成DEMO或简单程序的开发。如果您是要在ICECSS中使用，请将将plugin/ice_cloud.js引入</p>
                    <p>说明文档：<a href="https://github.com/T-baby/BesdCloud" target="_blank">https://github.com/T-baby/BesdCloud</a>
                    </p>
                </div>
                <!--/云服务-->

                  <!--模板引擎-->
                <div class="ice-panel-original" id="mbyq">
                    <p class="ice-title">模板引擎</p>
                    <p>ICECSS自带一个简单的模板引擎，可以使用户界面与业务数据（内容）分离，从而在前端开发出动态渲染的网站。同时可以更好的帮助前端处理json数据。如果您是要在ICECSS中使用，请将将plugin/ice_tmpl.js引入</p>
                    <p>文档地址：<a href="https://github.com/T-baby/ICECSS/tree/master/Docs/ice_tmpl/readme.md" target="_blank">https://github.com/T-baby/ICECSS/tree/master/Docs/ice_tmpl/readme.md</a></p>

                </div>
                <!--/模板引擎-->

                <!--平滑移动-->
                <div class="ice-panel-original" id="phyd">
                    <p class="ice-title">平滑移动</p>
                    <p>在需要平滑移动效果的超链接的父类那里增加<b>sll</b>,然后在script里增加：</p>
                    <code><pre> $(".sll").ice_scroll(700)</pre></code>

                </div>
                <!--/平滑移动-->

                <!--滚动监控-->
                <div class="ice-panel-original" id="gdjk">
                    <p class="ice-title">滚动监控</p>
                    <p>在script中使用这个命令来监控：</p>
                    <pre><code> $('监控对象').waypoint(function() {
});</code></pre>
                    <p>可以使用下面的代码进行设置：</p>
                    <pre><code>$.fn.waypoint.defaults = {
context: window,
continuous: true,
enabled: true,
horizontal: false,
offset: 100,
triggerOnce: false
}</code></pre>


                </div>
                <!--/滚动监控-->

                <!--弹出式画布-->
                <div class="ice-panel-original" id="tcshb">
                    <p class="ice-title">弹出式画布</p>
                    <p>现在js中使用</p>
                    <code><pre> $('a[rel*=ice-eject]').ice_eject()</pre></code>
                    <p>然后在html中增加弹出式画布所需要显示的内容</p>
                    <code><pre>&ltdiv class="ice-div ice-eject-w ice-center-abs" id="窗口的ID"&gt
&ltdiv class="ice-close ice-eject-close"&gt&lt/div&gt
&lt/div&gt</pre></code>
                    <p>使用时非常简单</p>
                    <code><pre>&lta href="#login" rel="ice-eject"&gt</pre></code>
                    <br/>
                    <a href="#hbtest" rel="ice-eject">
                        <button>测试</button>
                    </a>
                </div>
                <!--/弹出式画布-->

                <!--抽屉式导航-->
                <div class="ice-panel-original" id="ctsdh">
                    <p class="ice-title">抽屉式导航</p>
                    <p>首先先在js中添加</p>
                    <code><pre>$().ice_spmenu();</pre></code>
                    <p>然后在html中增加一个nav</p>
                    <code><pre> &ltnav class="ice-menu-sp ice-menu-sp-right"&gt</pre></code>
                    <p>你可以用h3标签在里面增加一个标题栏，可以用ul li向抽屉式导航中增加内容：</p>
                    <code><pre>&lth3&gt标题&lt/h3&gt
&ltul&gt
&ltli&gttest1&lt/li&gt
&ltli&gttest2&lt/li&gt
&ltli&gttest3&lt/li&gt
&ltli&gttest4&lt/li&gt
&ltli&gttest5&lt/li&gt
&lt/ul&gt</pre></code>
                    <p>可以用ice-sp-right来打开抽屉式导航</p>
                    <code><pre>&ltbutton class="ice-sp-right"&gt打开导航&lt/button&gt</pre></code>
                    <p>如果需要导航菜单从左边打开的话，可以将抽屉式导航nav和打开导航的button中的ice-sp-right改为ice-sp-left</p>
                    <p>我们建议将抽屉式导航独立出来而不是放在布局系统下。另外抽屉式导航应当再header上面，如果在header下面就会默认与header结合展示。</p>
                    <br/>
                    <button class="ice-sp-right">测试</button>
                </div>
                <!--/抽屉式导航-->

                   <!--图片延迟加载-->
                <div class="ice-panel-original" id="tpycjz">
                    <p class="ice-title">图片延迟加载</p>
                    <p>图片延迟加载可以让网页在载入的时候不载入图片，当看到图片所在的部分的时候再载入。使用前需要引入plugin/ice_image.js。图片按照下面的方式加入到网页中，ajax.gif是等待加载的动画，后面的属性是需要加载的图片</p>
                    <code><pre>&ltimg src="../img/ajax.gif" alt="" data-echo="../img/album-1.jpg"&gt</pre></code>
                    <img src="../img/ajax.gif" alt="" data-echo="../img/logo.png" >
                     <p>然后在js中添加方法</p>
                    <code><pre>ice_echo.init()</pre></code>
                 
                </div>
                <!--/图片延迟加载-->

                <!--超链接预载-->
                <div class="ice-panel-original" id="cljyz">
                    <p class="ice-title">超链接预载</p>
                    <p>超链接预载可以在鼠标悬浮在超链接上时提前加载网页，可以减少网页加载的等待时间。使用前需要引入plugin/ice_click.js。如果在导入脚本的script标签添加data-no-instant属性的话，超链接预载只会使用一次，去掉的话则每次都会使用。</p>
                    <code><pre>&ltscript src="ice_click.js" data-no-instant&gt&lt/script&gt</pre></code>
                     <p>然后在js中添加方法</p>
                    <code><pre>ice_click.init();</pre></code>
                 
                </div>
                <!--/超链接预载-->

                  <!--全屏滚动-->
                    <div class="ice-panel-original" id="qpgd">
                    <p class="ice-title">全屏滚动</p>
                    <p>使用前需要引入plugin/ice_fullpage下的js和css。</p>
                    <code><pre>&ltdiv id="fullpage"&gt
&ltdiv class="section"&gtSome section&lt/div&gt
&ltdiv class="section"&gtSome section&lt/div&gt
&ltdiv class="section"&gtSome section&lt/div&gt
&ltdiv class="section"&gtSome section&lt/div&gt
&lt/div&gt</pre></code>
                     <p>然后在js中添加方法</p>
                    <code><pre>$('#fullpage').ice_fullpage();</pre></code>
                 
                </div>
                  <!--/全屏滚动-->

                   <!--视差效果-->
                    <div class="ice-panel-original" id="scxg">
                    <p class="ice-title">视差效果</p>
                    <p>使用前需要引入plugin/ice_scrolly/ice_scrolly.js。</p>
                    <code><pre>具体使用方法请自行查看plugin/ice_scrolly下的example</pre></code>
                 
                 
                </div>

                  <!--/视差效果-->




                <!--图标-->
                <div class="ice-panel-original" id="tb">
                    <p class="ice-title">图标</p>
                    <p>你可以这么使用图标：</p>
                    <pre><code>&lti class="ice-icon-图标名字"&gt&lt/i&gt</code></pre>
                    <ul class="ice-grid tm-icons">

                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-adjust"></i> adjust</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-anchor"></i> anchor</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-archive"></i> archive</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-arrows"></i> arrows</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-arrows-h"></i> arrows-h</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-arrows-v"></i> arrows-v</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-asterisk"></i> asterisk</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-automobile"></i> automobile</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-ban"></i> ban</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-bank"></i> bank</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-bar-chart-o"></i> bar-chart-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-barcode"></i> barcode</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-bars"></i> bars</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-beer"></i> beer</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-bell"></i> bell</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-bell-o"></i> bell-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-bolt"></i> bolt</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-bomb"></i> bomb</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-book"></i> book</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-bookmark"></i> bookmark</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-bookmark-o"></i> bookmark-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-briefcase"></i> briefcase</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-bug"></i> bug</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-building"></i> building</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-building-o"></i> building-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-bullhorn"></i> bullhorn</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-bullseye"></i> bullseye</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-cab"></i> cab</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-calendar"></i> calendar</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-calendar-o"></i> calendar-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-camera"></i> camera</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-camera-retro"></i> camera-retro</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-car"></i> car</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-caret-square-o-down"></i> caret-square-o-down</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-caret-square-o-left"></i> caret-square-o-left</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-caret-square-o-right"></i> caret-square-o-right</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-caret-square-o-up"></i> caret-square-o-up</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-certificate"></i> certificate</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-check"></i> check</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-check-circle"></i> check-circle</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-check-circle-o"></i> check-circle-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-check-square"></i> check-square</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-check-square-o"></i> check-square-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-child"></i> child</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-circle"></i> circle</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-circle-o"></i> circle-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-circle-o-notch"></i> circle-o-notch</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-circle-thin"></i> circle-thin</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-clock-o"></i> clock-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-cloud"></i> cloud</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-cloud-download"></i> cloud-download</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-cloud-upload"></i> cloud-upload</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-code"></i> code</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-code-fork"></i> code-fork</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-coffee"></i> coffee</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-cog"></i> cog</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-cogs"></i> cogs</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-comment"></i> comment</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-comment-o"></i> comment-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-comments"></i> comments</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-comments-o"></i> comments-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-compass"></i> compass</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-credit-card"></i> credit-card</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-crop"></i> crop</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-crosshairs"></i> crosshairs</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-cube"></i> cube</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-cubes"></i> cubes</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-cutlery"></i> cutlery</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-dashboard"></i> dashboard</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-database"></i> database</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-desktop"></i> desktop</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-dot-circle-o"></i> dot-circle-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-download"></i> download</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-edit"></i> edit</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-ellipsis-h"></i> ellipsis-h</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-ellipsis-v"></i> ellipsis-v</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-envelope"></i> envelope</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-envelope-o"></i> envelope-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-envelope-square"></i> envelope-square</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-eraser"></i> eraser</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-exchange"></i> exchange</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-exclamation"></i> exclamation</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-exclamation-circle"></i> exclamation-circle</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-exclamation-triangle"></i> exclamation-triangle</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-external-link"></i> external-link</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-external-link-square"></i> external-link-square</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-eye"></i> eye</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-eye-slash"></i> eye-slash</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-fax"></i> fax</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-female"></i> female</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-fighter-jet"></i> fighter-jet</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-file-archive-o"></i> file-archive-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-file-audio-o"></i> file-audio-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-file-code-o"></i> file-code-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-file-excel-o"></i> file-excel-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-file-image-o"></i> file-image-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-file-movie-o"></i> file-movie-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-file-pdf-o"></i> file-pdf-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-file-photo-o"></i> file-photo-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-file-picture-o"></i> file-picture-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-file-powerpoint-o"></i> file-powerpoint-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-file-sound-o"></i> file-sound-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-file-video-o"></i> file-video-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-file-word-o"></i> file-word-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-file-zip-o"></i> file-zip-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-film"></i> film</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-filter"></i> filter</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-fire"></i> fire</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-fire-extinguisher"></i> fire-extinguisher</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-flag"></i> flag</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-flag-checkered"></i> flag-checkered</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-flag-o"></i> flag-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-flash"></i> flash</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-flask"></i> flask</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-folder"></i> folder</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-folder-o"></i> folder-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-folder-open"></i> folder-open</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-folder-open-o"></i> folder-open-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-frown-o"></i> frown-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-gamepad"></i> gamepad</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-gavel"></i> gavel</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-gear"></i> gear</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-gears"></i> gears</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-gift"></i> gift</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-glass"></i> glass</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-globe"></i> globe</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-graduation-cap"></i> graduation-cap</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-group"></i> group</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-hdd-o"></i> hdd-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-headphones"></i> headphones</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-heart"></i> heart</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-heart-o"></i> heart-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-history"></i> history</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-home"></i> home</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-image"></i> image</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-inbox"></i> inbox</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-info"></i> info</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-info-circle"></i> info-circle</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-institution"></i> institution</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-key"></i> key</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-keyboard-o"></i> keyboard-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-language"></i> language</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-laptop"></i> laptop</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-leaf"></i> leaf</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-legal"></i> legal</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-lemon-o"></i> lemon-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-level-down"></i> level-down</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-level-up"></i> level-up</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-life-bouy"></i> life-bouy</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-life-ring"></i> life-ring</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-life-saver"></i> life-saver</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-lightbulb-o"></i> lightbulb-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-location-arrow"></i> location-arrow</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-lock"></i> lock</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-magic"></i> magic</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-magnet"></i> magnet</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-mail-forward"></i> mail-forward</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-mail-reply"></i> mail-reply</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-mail-reply-all"></i> mail-reply-all</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-male"></i> male</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-map-marker"></i> map-marker</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-meh-o"></i> meh-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-microphone"></i> microphone</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-microphone-slash"></i> microphone-slash</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-minus"></i> minus</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-minus-circle"></i> minus-circle</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-minus-square"></i> minus-square</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-minus-square-o"></i> minus-square-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-mobile"></i> mobile</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-mobile-phone"></i> mobile-phone</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-money"></i> money</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-moon-o"></i> moon-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-mortar-board"></i> mortar-board</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-music"></i> music</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-navicon"></i> navicon</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-paper-plane"></i> paper-plane</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-paper-plane-o"></i> paper-plane-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-paw"></i> paw</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-pencil"></i> pencil</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-pencil-square"></i> pencil-square</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-pencil-square-o"></i> pencil-square-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-phone"></i> phone</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-phone-square"></i> phone-square</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-photo"></i> photo</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-picture-o"></i> picture-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-plane"></i> plane</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-plus"></i> plus</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-plus-circle"></i> plus-circle</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-plus-square"></i> plus-square</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-plus-square-o"></i> plus-square-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-power-off"></i> power-off</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-print"></i> print</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-puzzle-piece"></i> puzzle-piece</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-qrcode"></i> qrcode</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-question"></i> question</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-question-circle"></i> question-circle</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-quote-left"></i> quote-left</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-quote-right"></i> quote-right</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-random"></i> random</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-recycle"></i> recycle</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-refresh"></i> refresh</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-reorder"></i> reorder</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-reply"></i> reply</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-reply-all"></i> reply-all</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-retweet"></i> retweet</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-road"></i> road</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-rocket"></i> rocket</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-rss"></i> rss</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-rss-square"></i> rss-square</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-search"></i> search</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-search-minus"></i> search-minus</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-search-plus"></i> search-plus</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-send"></i> send</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-send-o"></i> send-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-share"></i> share</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-share-alt"></i> share-alt</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-share-alt-square"></i> share-alt-square</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-share-square"></i> share-square</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-share-square-o"></i> share-square-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-shield"></i> shield</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-shopping-cart"></i> shopping-cart</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sign-in"></i> sign-in</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sign-out"></i> sign-out</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-signal"></i> signal</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sitemap"></i> sitemap</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sliders"></i> sliders</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-smile-o"></i> smile-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sort"></i> sort</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sort-alpha-asc"></i> sort-alpha-asc</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sort-alpha-desc"></i> sort-alpha-desc</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sort-amount-asc"></i> sort-amount-asc</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sort-amount-desc"></i> sort-amount-desc</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sort-asc"></i> sort-asc</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sort-desc"></i> sort-desc</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sort-down"></i> sort-down</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sort-numeric-asc"></i> sort-numeric-asc</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sort-numeric-desc"></i> sort-numeric-desc</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sort-up"></i> sort-up</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-space-shuttle"></i> space-shuttle</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-spinner"></i> spinner</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-spoon"></i> spoon</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-square"></i> square</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-square-o"></i> square-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-star"></i> star</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-star-half"></i> star-half</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-star-half-empty"></i> star-half-empty</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-star-half-full"></i> star-half-full</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-star-half-o"></i> star-half-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-star-o"></i> star-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-suitcase"></i> suitcase</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-sun-o"></i> sun-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-support"></i> support</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-tablet"></i> tablet</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-tachometer"></i> tachometer</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-tag"></i> tag</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-tags"></i> tags</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-tasks"></i> tasks</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-taxi"></i> taxi</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-terminal"></i> terminal</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-thumb-tack"></i> thumb-tack</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-thumbs-down"></i> thumbs-down</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-thumbs-o-down"></i> thumbs-o-down</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-thumbs-o-up"></i> thumbs-o-up</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-thumbs-up"></i> thumbs-up</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-ticket"></i> ticket</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-times"></i> times</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-times-circle"></i> times-circle</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-times-circle-o"></i> times-circle-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-tint"></i> tint</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-toggle-down"></i> toggle-down</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-toggle-left"></i> toggle-left</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-toggle-right"></i> toggle-right</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-toggle-up"></i> toggle-up</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-trash-o"></i> trash-o</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-tree"></i> tree</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-trophy"></i> trophy</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-truck"></i> truck</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-umbrella"></i> umbrella</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-university"></i> university</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-unlock"></i> unlock</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-unlock-alt"></i> unlock-alt</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-unsorted"></i> unsorted</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-upload"></i> upload</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-user"></i> user</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-users"></i> users</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-video-camera"></i> video-camera</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-volume-down"></i> volume-down</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-volume-off"></i> volume-off</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-volume-up"></i> volume-up</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-warning"></i> warning</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-wheelchair"></i> wheelchair</li>
                        <li class="ice-width-1-2 ice-width-medium-1-4"><i class="ice-icon-wrench"></i> wrench</li>

                    </ul>



                </div>
                <!--/图标-->


            </div>
            <!--/主体-->
        </div>
        <!--/宽度限制-->

        <!--测试例-->
        <!--弹出式画布-->
        <div class="ice-div ice-eject-w ice-center-abs" id="hbtest">
            <div class="ice-close ice-eject-close"></div>
            <p>我是一个高冷的弹出式画布</p>
        </div>
    


</body>

</html>

<!--JS-->

<script src="../js/jquery.min.js"></script>
<script src="../js/icecss.js"></script>
<script src="../plugin/ice_image.js"></script>
<script src="../plugin/ice_click.js"></script>


<script>
    jQuery(document).ready(function($) {
       $(".sll").ice_scroll(700);
$('a[rel*=ice-eject]').ice_eject();
$().ice_spmenu();
ice_echo.init();
ice_click.init();
    });

</script>
<!--/JS-->
